<template>
  <div style="background: #fff;">
    <div ref="chart" :style="styles"></div>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, onUnmounted, watch,defineProps } from "vue";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
// 创建一个引用以获取DOM元素
const chart = ref(null);
let myChart = null;
  onMounted(() => {
  });
const props = defineProps({
  option: {
    type: Object,
    default: {},
  },
    /* 高度 */
    height: {
    type: Number,
    default: 100,
  },
  /* 最小高度 */
  width: {
    type: Number,
    default: 100,
  },
});
watch(
  () => props.option,
  () => {
    myChart = echarts.init(chart.value);
    myChart.setOption(props.option);
  }
);
const styles = computed(() => {
  let style = {};
  if (props.width) {
    style.width = `${props.width}%`;
  }
  if (props.height) {
    style.height =`calc(100vh - ${props.height}px)`;//`100vh - ${props.height}`
  }
  return style;
});

onUnmounted(() => {
  // 清除图表实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>
<style lang="scss" scoped>
.fontSize{
  font-size: 40px;
}
</style>